import LoginForm from "./components/LoginForm";
import SwitchDark from "@/components/SwitchDark";
import logo from "@/assets/images/logo.png";
import loginBg from "@/assets/images/loginBg.png";

const Login = () => {
	return (
		<div
			className="relative flex items-center justify-center min-w-[550px] h-full min-h-[500px] bg-cover bg-no-repeat bg-center"
			style={{ backgroundImage: `url(${loginBg})` }}
		>
			{/* Logo放在左上角 */}
			<div className="absolute top-5 left-5 flex items-center">
				<img className="w-[50px]" src={logo} alt="logo" />
				<span className="pl-4 text-xl font-bold whitespace-nowrap">浙江省网管理后台</span>
			</div>
			<SwitchDark />
			<div className="box-border flex items-center justify-end w-[100%] h-[100%] px-[4%] pl-5 overflow-hidden rounded-[10px]">
				<div className="p-10 pb-6 rounded-[4px] border shadow-md border-2px border-solid border-[#0568EC] border-gray-300 bg-[#A9C8E9] bg-opacity-50">
					<h1 className="text-2xl text-center font-bold mb-12">欢迎登录!</h1>
					<LoginForm />
				</div>
			</div>
		</div>
	);
};

export default Login;
